<!DOCTYPE html>
<title>Document#exitFullscreen() for nested fullscreen</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../trusted-click.js"></script>
<div><div></div></div>
<script>
async_test(t => {
  const outer = document.querySelector("div");
  const inner = outer.firstChild;

  // First request fullscreen for the outer element.
  trusted_request(t, outer);
  document.onfullscreenchange = t.step_func(() => {
    assert_equals(document.fullscreenElement, outer);

    // Then request fullscreen for the inner element.
    trusted_click(t, t.step_func(() => {
      inner.requestFullscreen();
      // Even though we are already in fullscreen, the change in
      // document.fullscreenElement should not happen synchronously.
      assert_equals(document.fullscreenElement, outer);
    }), outer);
    document.onfullscreenchange = t.step_func(() => {
      assert_equals(document.fullscreenElement, inner);

      // Now exit fullscreen.
      document.exitFullscreen();
      // Even though we don't need to exit fullscreen, the change in
      // document.fullscreenElement should not happen synchronously.
      assert_equals(document.fullscreenElement, inner);
      document.onfullscreenchange = t.step_func_done(() => {
        assert_equals(document.fullscreenElement, outer);
      });
    });
  });
  document.onfullscreenerror = t.unreached_func("fullscreenerror event");
});
</script>
